<template>
  <div class="login-container">
    <!-- 添加动画背景层 -->
    <div class="area">
      <ul class="circles">
        <li v-for="n in 10" :key="n"></li>
      </ul>
    </div>

    <a-row class="full-height" justify="center" align="middle">
      <a-col :xs="22" :sm="20" :md="12" :lg="8" :xl="6">
        <a-card class="login-card">
          <!-- 头部Logo -->
          <div class="login-header">
            <crown-outlined class="logo-icon" />
            <h1>管理系统</h1>
            <p>欢迎使用管理系统</p>
          </div>

          <!-- 登录表单 -->
          <a-form
            :model="formState"
            @finish="handleFinish"
            class="login-form"
          >
            <!-- 错误提示 -->
            <a-alert
              v-if="loginError"
              :message="loginError"
              type="error"
              show-icon
              class="error-alert"
              banner
            />

            <!-- 用户名 -->
            <a-form-item
              name="username"
              :rules="[{ required: true, message: '请输入用户名!' }]"
            >
              <a-input
                v-model:value="formState.username"
                size="large"
                placeholder="用户名"
              >
                <template #prefix>
                  <user-outlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <!-- 密码 -->
            <a-form-item
              name="password"
              :rules="[{ required: true, message: '请输入密码!' }]"
            >
              <a-input-password
                v-model:value="formState.password"
                size="large"
                placeholder="密码"
              >
                <template #prefix>
                  <lock-outlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 记住我和忘记密码 -->
            <div class="form-options">
              <a-checkbox v-model:checked="formState.remember">
                记住我
              </a-checkbox>
              <a class="forgot-link">忘记密码?</a>
            </div>

            <!-- 登录按钮 -->
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                :loading="loading"
                class="login-button"
                block
                size="large"
              >
                登录
              </a-button>
            </a-form-item>

            <!-- 其他登录方式 -->
            <div class="other-login">
              <a-divider>
                <span class="divider-text">其他登录方式</span>
              </a-divider>
              <div class="social-buttons">
                <a-button shape="circle" class="social-button">
                  <template #icon><wechat-outlined /></template>
                </a-button>
                <a-button shape="circle" class="social-button">
                  <template #icon><alipay-outlined /></template>
                </a-button>
                <a-button shape="circle" class="social-button">
                  <template #icon><dingding-outlined /></template>
                </a-button>
              </div>
            </div>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import {
  UserOutlined,
  LockOutlined,
  CrownOutlined,
  WechatOutlined,
  AlipayOutlined,
  DingdingOutlined
} from '@ant-design/icons-vue'
import {login,getUserinfo,getAdmin} from '@/api/login'
import { useUserStore } from '@/stores/user';

const userStore = useUserStore()

const router = useRouter()
const loading = ref(false)
const loginError = ref('')

const formState = reactive({
  username: '',
  password: '',
  remember: false
})

getAdmin({}).then(res=>{
  console.log(res)
})

const handleFinish = async (values) => {
  try {
    loading.value = true
    loginError.value = ''
    getUserinfo({username:formState.username,password:formState.password}).then(res=>{
      console.log(res)
      userStore.setUser(res)
      router.push('/')
    }).catch(err=>{
      console.log(err)
    })
    
  } catch (error) {
    loginError.value = error.message
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(to left, #4b6cb7, #182848);
  position: relative;
  overflow: hidden;
}

.full-height {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.login-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo-icon {
  font-size: 48px;
  color: #3498db;
  margin-bottom: 16px;
}

.login-header h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 8px;
}

.login-header p {
  font-size: 14px;
  color: #34495e;
  margin: 0;
}

.error-alert {
  margin-bottom: 24px;
}

.form-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.forgot-link {
  color: #1890ff;
  cursor: pointer;
}

.forgot-link:hover {
  color: #40a9ff;
}

.login-button {
  height: 40px;
  background: #3498db;
  border-color: #3498db;
  
  &:hover {
    background: #2980b9;
    border-color: #2980b9;
  }
}

.other-login {
  margin-top: 24px;
}

.divider-text {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.social-button {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
  }
}

:deep(.ant-input-affix-wrapper) {
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  &:hover, &:focus {
    background: #ffffff;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
  }
}

:deep(.ant-card-body) {
  padding: 32px;
}

/* 背景动画容器 */
.area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 浮动圆圈容器 */
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 浮动圆圈样式 */
.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
  border-radius: 50%;
}

/* 为每个圆圈设置不同的大小和动画延迟 */
.circles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}

/* 定义动画关键帧 */
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}
</style>
